<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回到顶部款式1</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 2000px;
        }
        #goback{
            width: 80px;
            height: 80px;
            background: lightcoral;
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="goback">回到顶部</div>
</body>
<script>
    /*
        回到顶部款式1:快速回到顶部
            * 滚动到一定的位置：显示回到顶部按钮
            * 点击回到顶部，可以快速回到顶部

        知识点：
            * 获取滚动距离：window.scrollY 
            * 设置滚动距离：window.scrollTo(x,y)=window.scrollTo(0,0)
            * 滚动事件：onscroll 但滚动滑轮的时候触发
    */


    //1.滚动到一定的位置：显示回到顶部按钮
    var goback = document.getElementById('goback');

    window.onscroll = function() {
        // console.log('动了滑轮')
        var scrollY = window.scrollY;
        if(scrollY >= 300) {
            goback.style.display = 'block';
        }else{
            goback.style.display = 'none';
        }
        console.log('滚动了：' + scrollY);
    }

    //2.点击回到顶部，可以快速回到顶部
    goback.onclick = function() {
        window.scrollTo(0,0);
    }


</script>
</html>